<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据库表--layui后台管理模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/user.css" media="all" />
    <link rel="stylesheet" href="/css/search.css" media="all" />
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_0zq2yro0cfn.css">
</head>
<div class="layui-card-body">

    <div class="layui-form toolbar">
        搜索：
        <select id="table-search-key">
            <option value=""></option>
            <option value="TABLE_NAME">表名</option>
        </select>&emsp;
        <input id="table-search-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
        <button id="table-btn-search" class="layui-btn icon-btn"><i class="iconfont icon-sousuo2"></i>搜索</button>
        <button  data-type="reset" id="resetTable" class="layui-btn icon-btn"><i class="iconfont icon-zhongzhi"></i>重置</button>
        <button id="table-btn-add" class="layui-btn icon-btn"><i class="iconfont icon-xinzeng"></i>添加</button>
        <button id="table-btn-export" class="layui-btn icon-btn"><i class="iconfont icon-xiazai1"></i>导出</button>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-warm" id="generator"><i class="iconfont icon-ZIPtubiao"></i>生成代码</a>
        </div>
    </div>
    <table class="layui-table" id="test" lay-filter="demo"></table>
</div>

<div id="divPage"style="text-align: center;"></div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" data-url="editUI?name={{d.name}}"><i class="iconfont icon-kechakan"></i>查看</a>
    {{# if(d.name.indexOf('sys_') < 0 && d.name.indexOf('qrtz_')<0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit" href="javascript:" data-url="editUI?name={{d.name}}"><i class="iconfont icon-xiugai"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" href="javascript:" lay-event="del"><i class="iconfont icon-shanchu"></i>删除</a>
    {{# } }}
</script>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js?t=1"></script>

<script type="text/javascript"  th:inline="none">
    var pages=1;
    var counts=1;
    var arg;
    layui.use(['layer','form','table','element','laypage','jquery'], function() {
        var layer = layui.layer,
            table = layui.table,
            $ = layui.jquery,
            form = layui.form,
        laypage=layui.laypage,
            jquery=layui.jquery,
            element = layui.element;

        form.render('select');
        //表格数据变量
        table.render({
            elem: '#test',
            url:'listPage',
            id:'testReload',
            page:false,
            cols: [[
                {type:'checkbox'},
                {field:'name', title: '表名'},
                {field:'tableRows',  title: '数据量',    width:'5%'},
                {field:'comment',     title: '备注', templet:'#comment' },
                {field:'createTime',  title: '创建时间',width:'18%',templet:'<div>{{ layui.laytpl.toDateString(d.createTime) }}</div>',unresize: true}, //单元格内容水平居中
                {field:'updateTime',  title: '更新时间',width:'18%',templet:'<div>{{ layui.laytpl.toDateString(d.updateTime) }}</div>',unresize: true}, //单元格内容水平居中
                {fixed: 'right',    title: '操作',width: '15%', align: 'center',toolbar: '#barDemo'}
            ]],
            done: function(res, curr, count){
                //pages=res.page;
                counts=res.count;
                //完整功能
                laypage.render({
                    elem: 'divPage'
                    ,count: counts,
                    first: '首页',
                    last: '尾页'
                    ,layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip']
                    ,theme: '#00A0E9'
                    ,curr: curr
                    ,skip: true
                    ,jump: function(obj,first){
                        curr = obj.curr;

                        if(!first){
                            getData(obj.curr,obj.limit)
                        }
                    }
                });

            }

        });
        function getData(page,limit){
        $.ajax({
            type: 'get',
            url: 'listPage?page='+page+"&limit="+limit,
            async: false,
            success: function (data) {
                $(".layui-laypage-btn").click();
                table.reload('testReload',{
                    data : data,
                    page:{
                        curr:page
                    }
                });

            }
        });
        }
        // 搜索按钮点击事件
        $('#table-btn-search').click(function () {
            var key = $('#table-search-key').val();
            var value = $('#table-search-value').val();
            table.reload('testReload', {where: {searchKey: key, searchValue: value}});
        });
        //重置
        $('#resetTable').on('click', function(){
            $('#table-search-key').val("");
            $('#table-search-value').val("");
            table.reload('testReload',{ where: {

                    searchKey:$('#table-search-key').val(),
                    searchValue:$('#table-search-value').val()
                }});
            form.render('select')
        });

        // 导出
        $('#table-btn-export').click(function () {
            var url =  'exportTable';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.responseType = "blob";
            xhr.setRequestHeader("client_type", "DESKTOP_WEB");
            xhr.onload = function() {
                if (this.status == 200) {
                    var blob = this.response;
                    var objecturl = URL.createObjectURL(blob);
                    window.location.href = objecturl;
                }
            }
            xhr.send();
        });
        $('#table-btn-add').click(function () {
            layer.msg("此功能暂不开放！",{icon: 6})
           // layer.open({
           //     type:2,
           //     title:'新增数据表',
           //     content:'addUI',
           //     area: ['70%', '70%'],
           //     btn:['添加','关闭'],
           //     zIndex: layer.zIndex,
           //     end: function () {
           //         $(".layui-laypage-btn")[0].click();
           //     }
           // })
           //  form.render();
        });
        $('#generator').on('click', function(){
            var checkStatus = table.checkStatus('testReload'),
                data = checkStatus.data,
            tables = [];
            if(data.length === 0){
                layer.msg("请选择所需要生成源码的数据表");
                return;
            }
            for(var i=0;i<data.length;i++){
                if(data[i].name.indexOf("sys_")>=0){
                    return layer.msg("系统表不能生成源码");
                }
                    tables.push(data[i].name);
            }
            location.href="genCode?tables=" + tables.join();
        });


        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if (obj.event==="detail") {
                var resizeFun;
                var editIndex = layer.open({
                    title : "查看数据表",
                    type : 2,
                    area: ['1000px', '1000px'],
                    content : "editUI?name="+data.name+"&type="+"show",
                    success : function(layero, index){
                        $(window).bind("resize", resizeFun = function () {
                            layer.full(index);
                            layer.iframeAuto(index);
                        });
                        setTimeout(function(){
                            layer.tips('点击此处返回数据表列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        },500);
                    },
                    cancel: function (index) {
                        $(window).unbind("resize", resizeFun);
                    }
                });
                //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
                $(window).resize(function(){
                    layer.full(editIndex);
                });
                layer.full(editIndex);
                layer.iframeAuto(editIndex);
            }
            if(obj.event === 'edit'){
                // window.parent.myaddTab($(this));
                var resizeFun;
                var editIndex = layer.open({
                    title : "编辑数据表",
                    type : 2,
                    area: ['1000px', '1000px'],
                    content : "editUI?name="+data.name+"&type="+"edit",
                    success : function(layero, index){
                        $(window).bind("resize", resizeFun = function () {
                            layer.full(index);
                            layer.iframeAuto(index);
                        });
                        setTimeout(function(){
                            layer.tips('点击此处返回数据表列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        },500);
                    },
                    cancel: function (index) {
                        $(window).unbind("resize", resizeFun);
                    }
                });
                //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
                $(window).resize(function(){
                    layer.full(editIndex);
                });
                layer.full(editIndex);
                layer.iframeAuto(editIndex);
            }
            if(obj.event === "del"){
                layer.confirm("你确定要删除该数据表么,删除之后不可恢复？",{btn:['是的,我确定','我再想想']},
                    function(){
                        $.post("${base}/admin/system/table/delete",{"tableName":data.name},function (res){
                            if(res.success){
                                layer.msg("删除成功",{time: 1000},function(){
                                    table.reload('test');
                                });
                            }else{
                                layer.msg(res.message);
                            }

                        });
                    }
                )
            }
        });


    });

</script>
</html>